<template>
  <Modal width="56" :value="visible" :title="title" @on-cancel='rightClose'>
    <Tabs v-model="currentTab" @on-click="currentTabChange">
      <TabPane label="基础信息" name="name1">
        <basis v-if="show" :caseForm="caseForm"/>
      </TabPane>
      <TabPane label="Headers参数" name="name2">
        <headers v-if="show" :header="headers" @changeHeaders="changeHeaders"/>
      </TabPane>
      <TabPane label="Body参数" name="name3">
        <Body :type="type" :parameters="parameters" @changeBody="changeBody"/>
      </TabPane>
      <TabPane label="校验结果" name="name4">
        <asserts :assert="asserts" v-if="show"/>
      </TabPane>
      <TabPane label="提取参数" name="name5">
        <extract :data="extract" v-if="show" @changeExtrcat="changeExtrcat"/>
      </TabPane>
      <TabPane label="前置处理器" name="name6">标签三的内容</TabPane>
      <TabPane label="后置处理器" name="name7">标签三的内容</TabPane>
    </Tabs>
    <div slot="footer">
      <Button @click="cancel">取消</Button>
      <Button type="primary" @click="ok">确定</Button>
    </div>
  </Modal>
</template>

<script>
import basis from "@/components/interface/basis";
import headers from "@/components/interface/headers";
import Body from "@/components/interface/Body";
import asserts from "@/components/interface/asserts";
import extract from "@/components/interface/extract";
import {addCase, caseDetail, caseEdit} from "@/utils/api";

export default {
  name: "caseModal",
  props: {
    title: String,
    visible: Boolean,
    edit: Boolean,
    caseId: {
      type: Number,
      default: 0
    },
    interfaceId: {
      type: Number,
      default: 0
    }
  },
  components: {
    basis,
    headers,
    Body,
    asserts,
    extract
  },
  data() {
    return {
      currentTab: "name1",
      id: 0,
      type: "json",
      parameters: {},
      asserts: [],
      extract: [],
      envList: [],
      headers: [],
      caseForm: {
        name: "",
        env_id: 0,
        interface_id: 0,
        query: "",
        remark: ""
      },
      show: false
    }
  },
  watch: {
    'visible': {
      handler(v) {
        if (v) {
          this.currentTab = "name1";
          this.show = true;
        }
      }
    },
    'interfaceId': {
      handler(v) {
        this.caseForm.interface_id = v;
      }
    },
    'caseId': {
      handler(v) {
        if (v > 0) {
          const obj = {id: v}
          caseDetail(obj).then(res => {
            this.$nextTick(() => {
              this.caseForm = res.data.data;
              this.type = res.data.data.type;
              this.parameters = JSON.parse(res.data.data.parameters);
              this.asserts = JSON.parse(res.data.data.asserts);
              this.extract = JSON.parse(res.data.data.extract);
              this.headers = JSON.parse(res.data.data.headers);
              if (this.visible) this.show = true
            })
          })
        } else {
          console.log(1111)
          this.show = true
        }
      }
    }
  },

  methods: {
    ok() {
      const obj = {
        ...this.caseForm,
        headers: JSON.stringify(this.headers),
        type: this.type,
        parameters: JSON.stringify(this.parameters),
        asserts: JSON.stringify(this.asserts),
        extract: JSON.stringify(this.extract),
        project_id: parseInt(localStorage.getItem("project_id"))
      }
      if (this.edit) {
        caseEdit(obj).then(res => {
          if (res.data.errno !== 0) {
            this.$Message.error(res.data.errmsg)
            return
          }
          this.$Message.success(res.data.data);
          this.cancel()
        })
      } else {
        addCase(obj).then(res => {
          if (res.data.errno !== 0) {
            this.$Message.error(res.data.errmsg)
            return
          }
          this.$Message.success(res.data.data);
          this.cancel()
        })
      }

    },
    cancel() {
      this.type = "json";
      this.parameters = {};
      this.asserts = [];
      this.extract = [];
      this.envList = [];
      this.headers = {};
      this.caseForm = {
        name: "",
        env_id: 0,
        interface_id: 0,
        query: "",
        remark: ""
      }
      this.$emit("closeCaseModal", false);
    },

    rightClose() {
      this.$emit("closeCaseModal", false);
    },

    currentTabChange(name) {
      this.currentTab = name
    },
    changeHeaders(v) {
      this.headers = v;
    },
    changeBody(v) {
      this.type = v.parameter_type;
      this.parameters = v.parameters_obj
    },
    changeExtrcat(v) {
      this.extract = v;
    },
    changeAssert(v) {
      this.asserts = v;
    }
  }
}
</script>

<style scoped>

</style>
